<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:th="http://www.thymeleaf.org"
      layout:decorator="/shared/layout">
<head>
    <title>Index</title>
    <script th:src="@{/js/value/index.js}"></script>
</head>
<body>
<div layout:fragment="content">
    <div class="container">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>Key</th>
                <th>Value</th>
                <th>Method</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="value : ${values}">
                <td th:text="${value.id}">1</td>
                <td th:text="${value.key}">key</td>
                <td th:text="${value.value}">value</td>
                <td>
                    <a th:href="@{'/value/retrieve/'+${value.id}}" class="btn btn-success">Retrieve</a>
                    <a th:href="@{'/value/update/'+${value.id}}" class="btn btn-warning">Update</a>
                    <a th:onclick="'Delete('+${value.id}+')'" class="btn btn-danger">Delete</a>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td></td>
                <td>
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li th:class="${index eq 1} ? 'disabled': ''">
                                <a th:href="@{/value/index/1}" aria-label="FirstPage">
                                    <span aria-hidden="true">FirstPage</span>
                                </a>
                            </li>
                            <li th:class="${index eq 1} ? 'disabled': ''">
                                <a th:href="@{'/value/index/' + ${index == 1 ? 1 : index-1}}" aria-label="Previous">
                                    <span aria-hidden="true">Previous</span>
                                </a>
                            </li>

                            <li th:each="pageNo : ${#numbers.sequence(start, end)}"
                                th:class="${index eq pageNo} ? 'active' : ''">
                                <a th:href="@{'/value/index/' + ${pageNo}}" th:text="${pageNo}"> <span
                                        th:if="${index eq pageNo}" class="sr-only">(current)</span></a>
                            </li>

                            <li th:class="${index eq totalPages} ? 'disabled': ''">
                                <a th:href="@{'/value/index/' + ${index eq totalPages ? totalPages : index + 1}}"
                                   aria-label="Next">
                                    <span aria-hidden="true">Next</span>
                                </a>
                            </li>
                            <li th:class="${index eq totalPages} ? 'disabled': ''">
                                <a th:href="@{'/value/index/' + ${totalPages}}" aria-label="LastPage">
                                    <span aria-hidden="true">LastPage</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </td>
                <td></td>
                <td>
                    <a th:href="@{/value/create}" class="btn btn-primary">Create</a>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
</div>
</body>
</html>